<template>
  <view class="container">
    <view class="top">
      <image
        src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/logo1.png"
        class="logo"
        mode="widthFix"
      ></image>
    </view>
    <view class="info">
      <view class="title">欢迎使用 富侨百城万店</view>
      <template v-if="!tranplate">
        <view class="input-box v-center">
          <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/phone.png" class="i-img" mode=""></image>
          <input type="number" v-model="phone" :focus="true" class="input flex-1" placeholder="请输入手机号" />
        </view>
        <view class="input-box v-center">
          <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/yzm.png" class="i-img" mode=""></image>
          <input type="number" v-model="code" class="input" placeholder="请输入验证码" />
          <view class="center yz-btn" :class="{ active: checkPhone }" @click="getCode" v-if="!codeStatus">
            获取验证码
          </view>
          <view class="second" v-else>{{ time }}秒</view>
        </view>
      </template>
      <template v-else>
        <view class="input-box v-center">
          <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/phone.png" class="i-img" mode=""></image>
          <input type="text" v-model="phone" class="input flex-1" placeholder="请输入账号" />
        </view>
        <view class="input-box v-center">
          <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/yzm.png" class="i-img" mode=""></image>
          <input type="password" v-model="code" class="input flex-1" placeholder="请输入密码" />
        </view>
      </template>
      <view class="tran" v-if="isDev" @click="tranplateData">{{
        tranplate ? "切换至验证码登录" : "切换至账号密码登录"
      }}</view>
      <view class="center btn" :class="{ active: allCheck }" @click="login">一键登录</view>
      <view class="xy-box">
        <checkbox-group @change="onCheckboxChange">
          <checkbox :checked="isCheck" :value="true" />
        </checkbox-group>
        <view class="xy-text">
          我已阅读并同意<text class="blue" @click="goRichText(1)">《富侨汇百城万店用户协议》</text
          ><text class="blue" @click="goRichText(2)">《隐私协议》</text>
        </view>
      </view>
    </view>
    <uni-popup ref="popup" type="center" border-radius="30rpx 30rpx 30rpx 30rpx">
      <view class="popup-box">
        <view class="tit">手机号未注册</view>
        <view class="text" @click="phoneCall">请联系富侨集团总部 {{ mobile }}</view>
        <view class="line"></view>
        <view class="know" @click="close">我知道了</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getLoginCode, loginMini, getConfig, adminLogin } from "../../api/active"
import uniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue"
export default {
  comments: {
    uniPopup
  },
  data() {
    return {
      isCheck: false,
      phone: "",
      code: "",
      time: 60,
      codeStatus: false,
      timer: null,
      mobile: "",
      isDev: true,
      tranplate: false,
      once: true
    }
  },
  computed: {
    checkPhone() {
      const reg = /^1[3-9]\d{9}$/
      if (this.phone && reg.test(this.phone)) {
        return true
      } else {
        return false
      }
    },
    allCheck() {
      if (!this.tranplate) {
        const reg = /^1[3-9]\d{9}$/
        if (this.phone && reg.test(this.phone) && this.code) {
          return true
        } else {
          return false
        }
      } else {
        if (this.phone && this.code) {
          return true
        } else {
          return false
        }
      }
    }
  },
  onLoad() {
    getConfig({
      key: "HEADQUARTER_MOBILE"
    }).then(res => {
      this.mobile = res.data
    })
    getConfig({
      key: "STAFF_TEST_SHITT"
    }).then(res => {
      this.isDev = res.data == "YES" ? true : false
    })
  },
  methods: {
    tranplateData() {
      this.tranplate = !this.tranplate
    },
    onCheckboxChange(event) {
      this.isCheck = event.detail.value.length > 0
    },
    phoneCall() {
      uni.makePhoneCall({
        phoneNumber: "023-68555568"
      })
    },
    close() {
      this.$refs.popup.close()
    },
    open() {
      this.$refs.popup.open("center")
    },
    getCode() {
      if (!this.checkPhone) return false
      if (!this.isCheck)
        return uni.showToast({
          icon: "none",
          title: "请阅读并勾选协议"
        })
      if (!this.phone)
        return uni.showToast({
          icon: "none",
          title: "请输入手机号"
        })
      const reg = /^1[3-9]\d{9}$/
      if (!reg.test(this.phone))
        return uni.showToast({
          icon: "none",
          title: "请输入正确的手机号"
        })
      if (!this.once) return false
      this.once = false
      getLoginCode({
        mobile: this.phone
      })
        .then(res => {
          this.once = true
          if (res.data == "FAIL") {
            this.open()
          } else {
            uni.showToast({
              title: "验证码已发送",
              icon: "none"
            })
            this.codeStatus = true
            this.timer = setInterval(() => {
              if (this.time < 1) {
                clearInterval(this.timer)
                this.codeStatus = false
                this.time = 60
              }
              this.time--
            }, 1000)
          }
        })
        .catch(() => {
          this.once = true
        })
    },
    goRichText(t) {
      uni.navigateTo({
        url: "../richtext/richtext?title=" + t
      })
    },
    login() {
      // this.open()
      if (!this.allCheck) return false
      if (!this.isCheck)
        return uni.showToast({
          icon: "none",
          title: "请阅读并勾选协议"
        })
      if (!this.tranplate) {
        if (!this.phone)
          return uni.showToast({
            icon: "none",
            title: "请输入手机号"
          })
        const reg = /^1[3-9]\d{9}$/
        if (!reg.test(this.phone))
          return uni.showToast({
            icon: "none",
            title: "请输入正确的手机号"
          })
        if (!this.code)
          return uni.showToast({
            icon: "none",
            title: "请输入验证码"
          })
      } else {
        if (!this.phone)
          return uni.showToast({
            icon: "none",
            title: "请输入账号"
          })
        if (!this.code)
          return uni.showToast({
            icon: "none",
            title: "请输入密码"
          })
      }
      if (!this.tranplate) {
        loginMini({
          mobile: this.phone,
          authCode: this.code
        }).then(res => {
          uni.setStorageSync("token", res.data.token)
          uni.setStorageSync("userId", res.data.user.id)
          uni.showToast({
            icon: "none",
            title: "登录成功",
            duration: 1500
          })
          setTimeout(() => {
            uni.reLaunch({
              url: "../index/index"
            })
          }, 1500)
        })
      } else {
        adminLogin({
          loginAcc: this.phone,
          password: this.code
        }).then(res => {
          uni.setStorageSync("token", res.data.token)
          uni.setStorageSync("userId", res.data.user.id)
          uni.showToast({
            icon: "none",
            title: "登录成功",
            duration: 1500
          })
          setTimeout(() => {
            uni.reLaunch({
              url: "../index/index"
            })
          }, 1500)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-1 {
  flex: 1;
}

.second {
  font-weight: 500;
  font-size: 30rpx;
  color: #999999;
  margin-left: 180rpx;
}

.popup-box {
  width: 690rpx;
  height: 407rpx;
  background: #f8f8f8;
  border-radius: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 55rpx;

  .tit {
    font-weight: 800;
    font-size: 40rpx;
    color: #333333;
  }

  .text {
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
    margin-top: 50rpx;
  }

  .line {
    height: 2rpx;
    width: 100%;
    background: #dddddd;
    margin-top: 87rpx;
  }

  .know {
    font-weight: 500;
    font-size: 34rpx;
    color: #333333;
    margin-top: 28rpx;
  }
}

.container {
  width: 100vw;
  min-height: 100vh;
  background: #fff;
  padding: 106rpx 45rpx 0 45rpx;
}

.top {
  .logo {
    width: 247rpx;
  }
}

.info {
  margin-top: 53rpx;

  .input-box {
    width: 100%;
    height: 99rpx;
    background: #f5f5f5;
    border-radius: 10rpx;
    padding: 0 20rpx 0 24rpx;
    margin-top: 34rpx;

    .i-img {
      width: 38rpx;
      height: 38rpx;
    }

    .input {
      margin-left: 22rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      width: 300rpx;
    }

    .yz-btn {
      width: 184rpx;
      height: 56rpx;
      border-radius: 28rpx;
      font-weight: 500;
      font-size: 26rpx;
      margin-left: 60rpx;
      color: #999999;
      border: 2rpx solid #999999;
      // background: #f5f5f5;
      &.active {
        border: 2rpx solid #005097;
        background: #f5f5f5;
        color: #005097;
      }
    }
  }
}

.title {
  font-weight: 800;
  font-size: 40rpx;
  color: #333333;
}

.tran {
  color: #005097;
  font-size: 28rpx;
  margin-top: 10rpx;
}

.btn {
  margin-top: 53rpx;
  width: 100%;
  height: 100rpx;
  background: #999999;
  border-radius: 50rpx;
  font-weight: 500;
  font-size: 30rpx;
  color: #ffffff;
  &.active {
    background: #005097;
  }
}

.xy-box {
  margin-top: 45rpx;
  display: flex;
  align-items: flex-start;
  gap: 15rpx;

  .xy-text {
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
  }

  .blue {
    color: #005097;
  }
}
</style>
